<!-- 个人中心 -->
<template>
    <div class="member">
        <div class="mem_box">
            <div class="mem_left">
                <dl class="mem_l_list">
                    <dt class="mem_l_tit">我的账户</dt>
                    <dd class="mem_l_item">
                        <router-link to="/home/member/memright">个人中心</router-link>
                    </dd>
                    <dd class="mem_l_item"><a href="javascript:;">消息通知</a></dd>
                    <dd class="mem_l_item"><a href="javascript:;">个人信息</a></dd>
                    <dd class="mem_l_item"><a href="javascript:;">安全设置</a></dd>
                    <dd class="mem_l_item"><a href="javascript:;">地址管理</a></dd>
                    <dd class="mem_l_item"><a href="javascript:;">我的积分</a></dd>
                    <dd class="mem_l_item"><a href="javascript:;">我的足迹</a></dd>
                    <dd class="mem_l_item"><a href="javascript:;">邀请有礼</a></dd>
                    <dd class="mem_l_item"><a href="javascript:;">幸运抽奖</a></dd>
                    <dt class="mem_l_tit">交易管理</dt>
                    <dd class="mem_l_item">
                        <router-link to="/home/order/order">我的订单</router-link>
                    </dd>
                    <dd class="mem_l_item"><a href="javascript:;">优惠券</a></dd>
                    <dd class="mem_l_item"><a href="javascript:;">礼品卡</a></dd>
                    <dd class="mem_l_item"><a href="javascript:;">评价晒单</a></dd>
                    <dd class="mem_l_item"><a href="javascript:;">售后服务</a></dd>
                    <dt class="mem_l_tit">我的收藏</dt>
                    <dd class="mem_l_item"><a href="javascript:;">收藏的商品</a></dd>
                    <dd class="mem_l_item"><a href="javascript:;">收藏的专题</a></dd>
                    <dd class="mem_l_item"><a href="javascript:;">关注的品牌</a></dd>
                    <dt class="mem_l_tit">帮助中心</dt>
                    <dd class="mem_l_item"><a href="javascript:;">帮助中心</a></dd>
                    <dd class="mem_l_item"><a href="javascript:;">在线服务</a></dd>
                </dl>
            </div>
            <router-view></router-view>
        </div>
    </div>
</template>
<script>

export default {
    name: "member",
}
</script>
<style scoped lang="less">
.member {
    background: #f5f5f5;

    .mem_box {
        width: 1240px;
        margin: 0 auto;
        display: flex;
        padding-top: 20px;

        .mem_left {
            margin-right: 20px;

            .mem_l_list {
                background: #fff;
                padding: 0 52px 20px;
                width: 116px;
                .mem_l_tit {
                    padding: 20px 0 5px;
                    font-size: 18px;
                    font-weight: 400;
                    border-top: solid 1px #f6f6f6
                }

                .mem_l_item {
                    font-size: 14px;

                    a {
                        padding: 15px 0;
                        color: #666;
                        display: block;

                        &:hover {
                            color: #27ba9b;
                        }
                    }

                    .router-link-active {
                        color: #27ba9b;
                        position: relative;

                        &::after {
                            content: "";
                            width: 6px;
                            height: 6px;
                            border-radius: 50%;
                            background: #27ba9b;
                            position: absolute;
                            top: 19px;
                            left: -16px;
                        }
                    }

                }
            }


        }
    }
}
</style>